<template>
  <div class="hello">
    <mu-carousel transition="slide" interval="5000" style="position: relative">
      <mu-carousel-item v-for="item in carouselImg" :key="item.imgUrl">
        <img :src="item.imgUrl" />
      </mu-carousel-item>
      <!-- <mu-carousel-item>
        <img :src="carouselImg[0].imgUrl" />
      </mu-carousel-item>
      <mu-carousel-item>
        <img :src="carouselImg[1].imgUrl" />
      </mu-carousel-item>
      <mu-carousel-item>
        <img :src="carouselImg[2].imgUrl" />
      </mu-carousel-item> -->
      <mu-paper class="banner">
        <!-- <br /><br /> -->
        <img src="../assets/logo.png" class="logo" />
        <h1>{{ hotelInfo.hotelName }}</h1>
        <h2>一家国际化连锁经营的大型酒店</h2>
        <p v-if="!isLogin()">
          <mu-button color="secondary" @click="navigateTo('/login')">
            <b>立即登录</b>
          </mu-button>
          <mu-button @click="navigateTo('/register')">立即注册</mu-button>
        </p>
        <p v-else>
          <mu-button color="secondary" @click="navigateTo('/room')">
            浏览热门客房
          </mu-button>
          <mu-button color="" @click="navigateTo('/order')"
            >查看个人订单</mu-button
          >
        </p>
      </mu-paper>
    </mu-carousel>
    <!-- <li v-for="index in carouselImg" :key="index.imgUrl">
      {{index.imgUrl}}
      <img width="1250" height="650" :src="index.imgUrl"/>
    </li> -->

    <div class="demo-paper">
      <mu-row style="margin-top:10px;margin-bottom:10px" gutter>
        <mu-col span='12' sm='6' xl='3'>
          <mu-card raised style="width: 100%; max-width: 375px; margin: 0 auto">
            <mu-card-media title="概况" sub-title="价格公道">
              <img src="../assets/banner/banner1.jpg" />
            </mu-card-media>
            <mu-card-title
              title="HO大酒店"
              sub-title="房间"
            ></mu-card-title>
            <mu-card-text>
              散落在指尖的阳光，我试着轻轻抓住光影的踪迹，
              它却在眉宇间投下一片淡淡的阴影。
            </mu-card-text>
            <mu-card-actions>
                <mu-button color="primary" flat to="/room">进入查看</mu-button>
              </mu-card-actions>
          </mu-card>
        </mu-col>
        <mu-col  span='12' sm='6' xl='3'>
          <mu-card raised style="width: 100%; max-width: 375px; margin: 0 auto">
            <mu-card-media title="概况" sub-title="安静舒适">
              <img src="../assets/banner/banner2.jpg" />
            </mu-card-media>
            <mu-card-title
              title="HO大酒店"
              sub-title="房间"
            ></mu-card-title>
            <mu-card-text>
              调皮的阳光掀动了四月的心帘，温暖如约的歌声渐起。调皮的阳光掀动了四月的心帘，温暖如约的歌声渐起。
            </mu-card-text>
            <mu-card-actions>
                <mu-button color="primary" flat to="/room">进入查看</mu-button>
              </mu-card-actions>
          </mu-card>
        </mu-col>
        <mu-col span='12' sm='6' xl='3'>
          <mu-card raised style="width: 100%; max-width: 375px; margin: 0 auto">
            <mu-card-media title="概况" sub-title="环境优雅">
              <img src="../assets/banner/banner3.jpg" />
            </mu-card-media>
            <mu-card-title
              title="HO大酒店"
              sub-title="房间"
            ></mu-card-title>
            <mu-card-text>
              似乎在诉说着，我也可以在漆黑的角落里，找到阴影背后的阳光，
            </mu-card-text>         
            <mu-card-actions>
                <mu-button color="primary" flat to="/room">进入查看</mu-button>
              </mu-card-actions>
          </mu-card>
        </mu-col>
        <mu-col span='12' sm='6' xl='3' >
          <mu-card raised style="width: 100%; max-width: 375px; margin: 0 auto;">
            <mu-card-media title="概况" sub-title="温馨舒适">
              <img src="../assets/banner/banner4.jpg" />
            </mu-card-media>
            <mu-card-title
              title="HO大酒店"
              sub-title="房间"
            ></mu-card-title>
            <mu-card-text>
              找到阳光与阴影奏出和谐的旋律。
              我要用一颗敏感赤诚的心迎接每一缕滑过指尖的阳光！
            </mu-card-text>
              <mu-card-actions>
                <mu-button color="primary" flat to="/room">进入查看</mu-button>
              </mu-card-actions>
          </mu-card>
        </mu-col>
      </mu-row>
      <mu-row style="margin-top:30px;margin-bottom:10px">
        <mu-col lg="4" sm="12">
          <img :src="indexImg2" />
          <h2>国际化</h2>
          <p>一家国际化连锁经营的大型酒店</p>
        </mu-col>

        <mu-col lg="4" sm="12">
          <img :src="indexImg1" />
          <h2>信息化</h2>
          <p>酒店现代化形象的标志，为客户提供方便快捷的服务</p>
        </mu-col>

        <mu-col lg="4" sm="12">
          <img :src="indexImg3" />
          <h2>互联网</h2>
          <p>网上预订快捷安全，折扣优惠高达50％！ 不收预订费，价格优惠。</p>
        </mu-col>
      </mu-row>
    </div>

    <!-- -->
    <div class="footer">
      Copyright @ 2022 <b> {{ hotelInfo.hotelName }} </b><br />
      地址：<b> {{ hotelInfo.address }} </b><br />
      电话号码： <b> {{ hotelInfo.telephone }} </b><br />
      电子邮箱：<b> {{ hotelInfo.email }} </b><br />
      网页地址：<b> {{ hotelInfo.website }} </b>
    </div>
    <!---->

    <!---->
  </div>
</template>

<script>
import indexImg1 from "../assets/imgs/index1.jpg";
import indexImg2 from "../assets/imgs/index2.jpg";
import indexImg3 from "../assets/imgs/index3.jpg";
import colImg from "../assets/banner/banner2.jpg";
import Cookies from "js-cookie";
import { getAllHotel } from "@/api/hotel";

export default {
  name: "IndexPage",
  data() {
    return {
      carouselImg: [
        // { imgUrl: "https://s1.ax1x.com/2022/07/01/jMalOe.png" },
        { imgUrl: "https://s1.ax1x.com/2022/07/01/jMa8wd.png" },
        { imgUrl: "https://s1.ax1x.com/2022/07/01/jMaGTA.png" },
        { imgUrl: "https://s1.ax1x.com/2022/07/01/jMdS7d.png" },
      ],
      indexImg1,
      indexImg2,
      indexImg3,
      hotelInfo: {
        hotelName: "ho",
        address: "",
      },
      list: [
        {
          image: colImg,
          title: "Breakfast",
          author: "Myron",
        },
        {
          image: colImg,
          title: "Burger",
          author: "Linyu",
        },
        {
          image: colImg,
          title: "Camera",
          author: "ruolin",
        },
      ],
    };
  },
  created: function () {
    this.isLogin();
    this.fetchData();
  },
  methods: {
    isLogin() {
      const username = Cookies.get("username");
      if (username == null || username === "") {
        return false;
      } else {
        return true;
      }
    },
    navigateTo(val) {
      this.$router.push(val);
    },
    fetchData() {
      getAllHotel()
        .then((res) => {
          this.hotelInfo = res.data[0];
        })
        .catch((err) => {
          console.log(err);
          this.$toast.error(err.toString());
        });
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.logo {
  border-radius: 50%;
  width: 100px;
  height: 100px;
}
.banner {
  margin-top: 60px;
  /* display: flex; */
  /* flex-direction: column; */
  /*background-image: linear-gradient(270deg,#8146b4,#6990f6);*/
  /* background-color: #2196f3; */
  /* background-image: url("https://s1.ax1x.com/2022/07/01/jMwFa9.png"); */
  position: absolute;
  height: 100%;
  background-color: #ffffff00;
  width: 100%;
  /* align-items: center;
  justify-content: center; */
  color: #ffffff;
  padding: 60px;
  box-sizing: border-box;
}
.carousel img {
  width: inherit;
}
.demo-paper{
  padding: 20px;
  box-sizing: border-box;
}
.hello {
  text-align: center;
}
.demo-paper img {
  width: 300px;
}
.footer {
  text-align: center;
  color: rgb(0, 0, 0);
  padding: 50px 40px;
  /* background-color: #2196f3; */
  /*background-image: linear-gradient(270deg,#8146b4,#6990f6);*/
  /* background: rgba(0, 0, 0, 0.267); */
  /* background-image: url('https://s1.ax1x.com/2022/07/01/jMwBIs.png'); */
}
.gridlist-inline-demo {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
} /*
html,
body {
  background-color: rgb(173, 173, 173); 
}*/
</style>
